<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
        padding: 0;
        margin: 0;
    }
    div[id] {
        width: 100px;
        height: 100px;
        background: #eeeeee;
        border: 1px solid gray;
    }
  </style>
</head>
<body>
<div id="coords">coords</div>
<div id="pointerzone">pointerzone</div>
<script>
    window.onload = function () {
        init()

        function init() {
            // Get a reference to our pointer div
            var pointerzone = document.getElementById("pointerzone");
            // Add an event handler for the pointerdown event
            pointerzone.addEventListener("pointerdown", pointerHandler, false);
        }

        function pointerHandler(event) {
            // Get a reference to our coordinates div
            var coords = document.getElementById("coords");
            // Write the coordinates of the pointer to the div
            console.log('event:',event);
            coords.innerHTML = 'x: ' + event.pageX + ', y: ' + event.pageY;
        }
    }
</script>
</body>
</html>
